<template>
	<view class="container">
		<view class="menu">
			
		</view>
		
		<view class="layout">
		<view class="box" v-for="(item,index) in pets" :key="item._id">
			<view class="pic">
				
				<!-- <image src="../../static/images/元神背包.jpg" mode="aspectFill"></image> -->
				<!-- 短边完全显示，长边截取保留中间 -->
				<!-- <image src="../../static/images/元神背包.jpg" mode="aspectFit"></image> -->
				<!-- 长边完全显示，短边不盛满容器	 -->
				<!-- <image src="../../static/images/元神背包.jpg" mode="heightFix"></image> -->
				<!-- 短边完全显示，长边截取保留左侧	 -->
				<image lazy-load  :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				<!-- 容器宽度不变，容器高度自适应 -->
			</view>
			<view class="comment">{{item.comment}}</view>
			<view class="shop">{{item.shop}}</view>
		</view>	
		</view>
		<view class="float">
			<view class="item" @click="refresh">
				<uni-icons type="refreshempty" size="30"></uni-icons>
</view>
			<view class="item" @click="backTop"><uni-icons type="arrow-up" size="30"></uni-icons>
</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import {onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app";
	const pets=ref([])
	
	function network(){
		uni.request({
			url:"https://tea.qingnian8.com/tools/taoShow",
			// url:"https://api.thecatapi.com/v1/images/search",
			data:{
				size:5
			},
				header:{
					'access-key':"mgs823@@"
				},
		}).then(
		res=>{
			console.log(res)
			pets.value=[...pets.value,...res.data.data]
		}
		).then(
		uni.stopPullDownRefresh())	
	}
	

	function onPreview(index){
		
		let urlarrs=pets.value.map(item=>item.url)
		uni.previewImage({
			current:index,
			urls:urlarrs,
		})
	}
	
	function refresh(){
		uni.startPullDownRefresh({
			
		})
	}
	function backTop(){
		uni.pageScrollTo({
			scrollTop:0,
			duration:100
		})
	}
	
	onReachBottom(()=>{
		
		network();
	})
	onPullDownRefresh(()=>{
		pets.value=[]
		network();
	})
network();
</script>

<style lang="scss" scoped>
	
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 30rpx orange;
				border-radius: 10rpx;
				overflow: hidden;
				
				.pic{
					image{
						width: 100%;
					}
				}
				.text{
						padding: 30rpx;
				}
				.shop{
						padding: 0 30rpx 30rpx;
						text-align: right;
						color:paleturquoise;
				}
			}
			
			
		}
		
		.float{
			
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			.item{
				width: 90rpx;
				height: 90rpx;
				background: skyblue;
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow:0 10rpx 30rpx greenyellow;
			}
		}
		
	}

</style>
